<!-- 教练 – 首页 – 打卡		clock -->
<template>
	<view class="warps">
		<view class="punch-top">
			<view class="w90 f b c p_t_20">
				<view class="vw25 f b c">
					<image style="width: 96rpx;height: 96rpx;" src="../../../static/img/065.png" mode=""></image>
					<view class="f d">
						<text class="fs28 bold">姓名</text>
						<text class="p_t_20 fs164 hui">职位</text>
					</view>
				</view>	
				<view class="vw15 f d c">
					<image style="width:36rpx;height:36rpx;" src="../../../static/img/066.png" mode=""></image>
					<text class="fs16 p_t_10">考勤统计</text>
				</view>
			</view>
		</view>
		<view class="punch-daka">
			<view class="w95 f b c p_t_20">
				<view class="punch-daka-s" :class="DC==0?'col':'bol'" @click="DCs(0)">
					<view class="ws90 f b c p_t_10">
						<view>
							<text class="">上班</text>
						</view>
						<view class="">
							<image style="width: 20rpx;height: 20rpx;" src="../../../static/img/064.png" mode=""></image>
							<text class="">08:52已打卡</text>
						</view>
					</view>
				</view>
				<view class="punch-daka-s" :class="DC==1?'col':'bol'" @click="DCs(1)">
					<view class="ws90 f b c p_t_10" >
						<view>
							<text class="">下班</text>
						</view>
						<view class="">
							<text class="">未打卡</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="DC==0">
				<view class="punch-daka-lan" @click="ao">
					<view class="f d c p_t_50">
						<text class="fs32 white">下班打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
			<view v-if="DC==1">
				<view class="punch-daka-lan">
					<view class="f d c p_t_50">
						<text class="fs32 white">上班打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-buttom">
			<view class="w90 fs16 p_t_20">
				<text>1、今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒 <br>2、今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒<br> 3、今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒今日工作提醒</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DC: 0, //  0:上课   1:课后
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '考勤打卡'
			})
		},
		methods: {
			DCs(e) {
				this.DC = e
			},
			ao(){
				uni.navigateTo({
					url:"../attendance/attendance"
				})
			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #F6F8FC;
	}
	.col {
		color:#1F73F2;
		background-color:#F1F6FF;
	}
	.bol{
		background: #ececec;
	}
	.punch-top{
		width: 686rpx;
		height: 144rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka{
		width: 686rpx;
		height: 500rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka-s{
		width: 300rpx;
		height: 58rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
	.punch-daka-lan{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin:0 auto;
		margin-top:120rpx;
	}
	.punch-buttom{
		width: 686rpx;
		height: 298rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
		overflow:hidden;
	}
	.punch-buttom-jin{
		width: 120rpx;
		height: 48rpx;
		line-height:48rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 24rpx;
		margin-top:32rpx;
	}
	.landian{
		width: 16rpx;
		height: 16rpx;
		opacity: 1;
		background: #ffffff;
		border: 1rpx solid #1f73f2;
		border-radius: 50%;
	}
	.punch-buttom-boxy{
		width: 502rpx;
		height: 82rpx;
		line-height:82rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding-left:24rpx;
	}
</style>
